<template>
	<el-checkbox-group :value="value || []" @input="changeValue" :disabled="disabled" class="checkbox-group">
		<template v-for="(option, index) in item.options">
			<el-checkbox v-if="!option.isDelete" :key="index" :label="option.key" :class="item.arrangeType === 2 ? 'option-vertical__checkbox': ''">
				<span>{{option.value}}</span>
			</el-checkbox>
		</template>
	</el-checkbox-group>
</template>

<script lang="ts">
import { Component, Vue, Prop, Mixins } from 'vue-property-decorator';
import widgetCommon from '../common/widgetCommon';
@Component({})
export default class extends Mixins(widgetCommon) {}
</script>

<style lang="stylus" scoped>
.checkbox-group {
	margin-bottom -16px
	/deep/.el-checkbox {
		margin-bottom 8px
		color rgba(0, 0, 0, 0.6)
		margin-right 20px
	}
	& + /deep/.el-form-item__error{
		padding-top 12px !important
	}
}
.option-background {
	color $white
	border-radius 4px
	padding 4px 12px
}
.option-vertical {
	display block
	margin-bottom 15px
}
.option-vertical__checkbox {
	display block
}
</style>
